<div class="flex justify-center items-center min-h-screen bg-base-200">
  <div class="card w-96 bg-base-100 shadow-xl">
    <div class="card-body">
      <h1 class="text-2xl font-bold text-center">Sign up</h1>
      <div class="text-center text-sm">
        <%= link_to "Sign in", new_user_session_path, class: "underline" %> instead
      </div>

      <% if @account_invitation %>
        <div class="flex items-center justify-center mb-4 text-center">
          <%= image_tag avatar_url_for(@account_invitation.account), class: "h-5 w-5 rounded-full inline-block mr-1" %>
          <div>
            <strong><%= @account_invitation.invited_by.name %></strong> invited you to join <strong><%= @account_invitation.account.name %></strong>
          </div>
        </div>
      <% end %>

      <%= form_with(
        model: resource,
        as: resource_name,
        url: registration_path(resource_name, invite: params[:invite]),
        html: { class: "space-y-4" },
      ) do |f| %>
        <%= render "shared/error_messages", resource: resource %>

        <div class="form-control">
          <%= f.label :name, class: "label" do %>
            <span class="label-text">Name</span>
          <% end %>
          <%= f.text_field :name, autocomplete: "off", placeholder: true, class: "input input-bordered w-full" %>
        </div>

        <div class="form-control">
          <%= f.label :email, class: "label" do %>
            <span class="label-text">Email</span>
          <% end %>
          <%= f.email_field :email, autocomplete: "email", placeholder: true, class: "input input-bordered w-full" %>
        </div>

        <div class="form-control">
          <%= f.label :password, class: "label" do %>
            <span class="label-text">Password</span>
          <% end %>
          <%= f.password_field :password, autocomplete: "new-password", placeholder: true, class: "input input-bordered w-full" %>
        </div>

        <div class="form-control mt-6">
          <%= f.submit "Create Account", class: "btn btn-primary w-full" %>
        </div>
      <% end %>
      <% unless Rails.application.config.local_mode %>
        <div class="flex items-center my-4">
          <div class="flex-grow border-t border-gray-600"></div>
          <span class="mx-4 text-gray-500">OR</span>
          <div class="flex-grow border-t border-gray-600"></div>
        </div>
        <%= render "devise/shared/links" %>
      <% end %>
    </div>
  </div>
</div>
